Posts Details
Here is a detailed
explaination on this course
Javascript DOM Content
Javascript / Javascript DOM Content
The HTML Code which displays the layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="container">
<div class="banner">
</div>
<div class="menu">
</div>
<div class="conten-area">
<div class="content-area-1">
<button type="submit" onclick="calculation()">Click Me</button>
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
The CSS code which adds styles to the HTML layout
#container{
background: rgb(201, 201, 201);
width: 500px;
height: 700px;
}
.banner{
background: rgb(73, 155, 244);
width: 500px;
height: 200px;
}
.menu{
background: rgb(131, 179, 231);
width: 500px;
height: 100px;
}
.conten-area{
background: rgb(81, 154, 232);
width: 350px;
height: 300px;
display: flex;
}
.content-area-1{
position: relative;
background: rgb(18, 54, 92);
width: 150px;
height: 300px;
left: 100%;
float: right;
}
.footer{
background: rgb(122, 154, 177);
width: 500px;
height: 100px;
}
The Javascript code which makes all the events are handled
//The calculation function which perform the calculation of the price
function calculation(){
let price = parseInt(prompt("Enter a number "))
let quantity = parseInt(prompt("Enter a number "))
let grandTotal = price * quantity
if (grandTotal >= 1500) {
alert(grandTotal - 0.1)
} else {
alert(grandTotal)
}
}
You can change the onclick="calculation()" event of the HTML component of your
//The condition to calculate the exams score
function display(){
let number1 = parseInt(prompt("Enter a number "))
let number2 = parseInt(prompt("Enter a number "))
let total = number1 + number2
if (total >= 100) {
alert("Your Exams Score Too High")
} else if (total >= 80) {
alert("A")
}else if (total >= 70) {
alert("B")
}else if (total >= 60) {
alert("C")
}else if (total >= 50) {
alert("D")
}else if (total >= 0) {
alert("F")
}else{
alert("Invalid Score")
}
}
The Output of the Code
Leave a comment